<template>
	<view>
		<!-- 自定义标题 -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">文章资讯</block>
		</cu-custom>
		
		<!-- 头部滑块 -->
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in navTop"
				:key="index" @tap="tabSelect" :data-id="index">
				{{item.title}}
			</view>
		</scroll-view>
		
		
		<view class="cu-card article no-card">
		<!-- todo新闻的一些view -->
		
		
		
		
		<!-- 没有数据展示 -->
			<view class="page-box" v-if="newsList.length < 1">
				<view>
					<view class="centre">
						<image src="https://cdn.zhoukaiwen.com/noData1.png" mode="widthFix"></image>
						<view class="explain">
							暂无数据
							<view class="tips">可以去看看有其他</view>
						</view>
					<!-- 	<view class="btn">随便逛逛</view> -->
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view style="width: 1rpx;height: 150rpx;"></view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		data(){
			return{
				requestStatus: false, // 事件防抖
				TabCur: 0,//默认第0个开始
				scrollLeft: 0,
				newsList: '',//获取的所有分页数据
				navTop: [{
						id: 1,
						title: '全部'
					},
					{
						id: 2,
						title: 'Web前端'
					},
					{
						id: 3,
						title: 'UI设计'
					},
					{
						id: 4,
						title: 'Node后台'
					},
					{
						id: 5,
						title: '面试精选'
					},
					{
						id: 6,
						title: '技术前沿'
					},
					{
						id: 7,
						title: '更多资讯'
					}
				]
			}
		},
		mounted() {
			// this.getData();
		},
		methods:{
			/**
			 * 案例  demo  接口没有开放
			 * 获取数据
			 */
			getData() {
				var type = this.navTop[this.TabCur].id;
				console.log("type",type)
				if(type == 1){
					type = '';
				}
				let opts = {
					url: 'api/blog/list?searchTypeId=' + type,
					method: 'get'
				};
				uni.showLoading({
					title: '加载中'
				});
				request.httpRequest(opts).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.statusCode == 200) {
						this.newsList = res.data.data;
						console.log(this.newsList);
					} else {
						console.log('数据请求错误～');
					}
				});
			},
			/**
			 * 点击分类菜单
			 * @param {Object} e
			 */
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				//滑动
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				setTimeout(() => {
					// this.getData();
					console.log("当前点击的第几个+",e.currentTarget.dataset.id);
					this.requestStatus = false;	// 模拟执行完毕，改变 requestStatus
				}, 300);
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
	
		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}
	
		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}
	.nav .cu-item.cur {
		font-weight: 600;
	}
</style>